<script setup>


import {
    Edit,
    Delete,
    Search
} from '@element-plus/icons-vue'

import { ref } from 'vue'

//导入消息框
import {ElMessage,ElMessageBox} from 'element-plus'
import {getSelectListService1} from'@/api/adm/sports_apply.js'
import {getDeptListService} from '@/api/adm/student.js' 
import { getPageService,addUserScore } from '@/api/adm/addGradue.js'
import {getSelectListService} from '@/api/sportsProject/sportsProject.js'
import { onMounted } from 'vue';
//分页条数据模型
const currentPage = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(5)//每页条数
const loading = ref(true)
//学期下拉框数据
const yearTerm=ref('20232')
const yearList=ref([])
//院系ID
const checkDeptID=ref(null)
const select=ref([])
const deptList=ref([])
const page=ref()
const checkProjectID=ref()
const keyWord=ref(null)
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getPage()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    currentPage.value = num
    getPage()
}
const getPage=async()=>{
    const model={
        currentPage: currentPage.value?currentPage.value:1,
        pageSize: pageSize.value?pageSize.value:1,
        deptID:checkDeptID.value?checkDeptID.value:null,
        keyword:keyWord.value?keyWord.value:null,
        yearTermID:yearTerm.value?yearTerm.value:null,
        sportsID:checkProjectID.value
    }
    let result=await getPageService(model)
    page.value=result.data.records
    loading.value=false
    total.value=result.data.total
}
const getSelectList =async () =>{
    let result = await getSelectListService();
    //渲染下拉框数据
    yearList.value = result.data;
}
const getSelect= async()=>{
    const model={
        yearTermID:yearTerm.value
    }
    let result= await getSelectListService1(model)
    select.value=result.data
    checkProjectID.value=select.value[0]?.sportsID
}
const getDeptList = async ()=>{
    let result = await getDeptListService();
    deptList.value=result.data
    checkDeptID.value=deptList.value[0].deptID
}
const getSportsProjectList=async()=>{
    
}
//页面加载时调用
onMounted(
    ()=>{
        getSelectList().then(()=>{
            getSelect().then(()=>{
                getDeptList().then(()=>{
                    getPage()
                })
            })
        })
    }
)
const checkDept=()=>{
    getPage()
}
const checkProject=()=>{
    getPage()
}
const dialogVisible=ref(false)
const user=ref({
    userID:null,
    userName:null,
    sportsName:null,
    score:null,
    awardsName:null,
    sportsID:null,
    awardsFlag:true,
    yearTermID:'20232'
})
const open=(row)=>{
    user.value.userID=row.userID
    user.value.userName=row.name
    user.value.sportsName=row.sportsName
    user.value.awardsName=''
    user.value.score=''
    user.value.sportsID=row.sportsID
    dialogVisible.value=true
}
const addScore=async()=>{
    console.log(user.value)
    if(user.value.score===null||user.value.score===''){
        ElMessage.error("请输入成绩！")
        return 
    }
    user.value.awardsName=adwards.value
    if(user.value.awardsName==='未获奖'){
        user.value.awardsFlag=false
    }
    let result=await addUserScore(user.value)
    if(result!=null){
        ElMessage.success(result.data? result.data:'添加成功')
    }
    dialogVisible.value=false
    getPage()
}
const title=ref("录入成绩")
const rules = {
    userName: [
        { required: true, message: '请输入用户昵称', trigger: 'blur' },
        {
            pattern: /^\S{2,10}$/,
            message: '昵称必须是2-10位的非空字符串',
            trigger: 'blur'
        }
    ],
    userID: [
        { required: true, message: '请输入学工号', trigger: 'blur' },
        {
            pattern: /^\S{2,10}$/,
            message: '昵称必须是2-10位的非空字符串',
            trigger: 'blur'
        }
    ],
    sportsName: [
        { required: true, message: '请输入项目名', trigger: 'blur' },
        {
            pattern: /^\S{0,50}$/,
            message: '昵称必须是2-10位的非空字符串',
            trigger: 'blur'
        }
    ],
    score:[
    { required: true, message: '请输入成绩', trigger: 'blur' },
    {
            pattern: /^\S{0,50}$/,
            message: '成绩不能为空',
            trigger: 'blur'
        }
    ],
    adwardsName:[
    { required: true, message: '请选择获奖类型', trigger: 'blur' },
    {
            pattern: /^\S{2,10}$/,
            message: '昵称必须是2-10位的非空字符串',
            trigger: 'blur'
        }
    ]
}
const adwardsNameList=[
    {adwards:"未获奖",key:"0"},
    {adwards:"一等奖",key:"1"},
    {adwards:"二等奖",key:"2"},
    {adwards:"三等奖",key:"3"}
]
const adwards=ref("未获奖")
//入学年份
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span><strong>成绩录入</strong></span>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="学期" style="width: 250px;">
                <el-select v-model="yearTerm" class="m-2" placeholder="全部"  @change="checkYear" disabled="false">
                <el-option
                        v-for="item in yearList"
                        :key="item.yearTermID"
                        :label="item.yearTermName"
                        :value="item.yearTermID"
                />
            </el-select>
            </el-form-item>
            <el-form-item label="学院"style="width: 280px;">
                <el-select v-model="checkDeptID" class="m-2" placeholder="全部"  @change="checkDept">
                <el-option
                        v-for="item in deptList"
                        :value="item.deptID"
                        :key="item.deptID"
                        :label="(item.deptID?item.deptID+'|':'')+item.deptName"
                />
            </el-select>
            </el-form-item>
            <el-form-item label="运动项目"style="width: 200px;">
                <el-select v-model="checkProjectID" class="m-2" placeholder="全部"  @change="checkProject">
                <el-option
                        v-for="item in select"
                        :value="item.sportsID"
                        :key="item.sportsID"
                        :label="item.sportsName"
                />
            </el-select>
            </el-form-item>
        </el-form>
        <!-- 成绩录入 -->
        <el-table  v-loading="loading"
                element-loading-text="Loading..."
                :element-loading-spinner="svg"
                element-loading-svg-view-box="-10, -10, 50, 50"
                :row-class-name="tableRowClassName"
                :data="page" style="width: 100%">
                <el-table-column type="index" width="55" label="序号"/>
            <el-table-column label="学期" prop="yearTermID" width="100%"></el-table-column>
            <el-table-column label="报名项目" prop="sportsName" show-overflow-tooltip></el-table-column>
            <el-table-column label="学工号" prop="userID" show-overflow-tooltip> </el-table-column>
            <el-table-column label="姓名" prop="name"width="100%"></el-table-column>
            <el-table-column label="项目类型">
                <template #default="{ row }">
                    <el-text class="mx-1" type="primary"v-if="row.type ===1">单人项目</el-text>
                    <el-text class="mx-1" type="warning"v-else>团队项目</el-text>
                 </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button  type="primary" @click=open(row) v-if="row.flag==2">录入成绩</el-button>
                    <el-button  type="success" @click=deletProjectByID(row) v-if="row.flag==3">查看成绩</el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="暂无需要录入的成绩" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 7 ,9]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
    <!-- 成绩录入弹窗 -->
<el-dialog v-model="dialogVisible" :title="title" width="30%">
    <el-form :model="user"  :ref="user" :rules="rules" label-width="100px" style="padding-right: 30px"  status-icon>
        <el-form-item label="学号：" prop="userID">
            <el-input v-model="user.userID" minlength="1" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名：" prop="userName">
            <el-input v-model="user.userName" minlength="1" maxlength="15"disabled></el-input>
        </el-form-item>
        <el-form-item label="项目名" prop="sportsName">
            <el-input v-model="user.sportsName" minlength="1" maxlength="15"disabled></el-input>
        </el-form-item>
        <el-form-item label="成绩" prop="score"required=true>
            <el-input v-model="user.score" minlength="1" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="获奖等级" prop="adwardsName">
            <el-select v-model="adwards" class="m-2" placeholder="全部">
                <el-option
                        v-for="item in adwardsNameList"
                        :value="item.adwards"
                        :key="item.adwards"
                        :label="item.adwards"
                />
            </el-select>
        </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addScore()"> 保存 </el-button>
            </span>
    </template>
</el-dialog>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .el-table .warning-row {
        --el-table-tr-bg-color: var(--el-color-warning-light-9);
    }
    .el-table .success-row {
        --el-table-tr-bg-color: var(--el-color-success-light-9);
    }
}
</style>